<template>
  <BreadCrumb ref="breadcrumb" :item="item"></BreadCrumb>
  <div class="home-wrapper">
    <div class="swiper-wrapper">
      <el-carousel :interval="4000" indicator-position="outside" type="card" height="320px">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3 text="2x1" justify="center">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="layout-wrapper">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="company-message-area">
            <span>公司介绍</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="company-message-area">
            <span>公司架构</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="company-message-area">
            <span>公司战略</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="company-message-area">
            <span>高层介绍</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="two-table-wrapper"></div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import BreadCrumb from '@/components/BreadCrumb.vue';
defineOptions({
  name: ''
})
const breadcrumb = ref()
const item = ref({
  first: '首页'
})
</script>

<style lang="scss" scoped>
  .home-wrapper {
    padding: 8px;
    height: calc(100vh - 101px);
    background: #f5f5f5;
    display: flex;
    flex-direction: column;

    .swiper-wrapper {
      padding: 0 20px;
      background: #fff;
      margin-bottom: 8px;
    }
    .layout-wrapper {
      padding: 8px;
      margin-bottom: 8px;
      background: #fff;

      .company-message-area {
        background: #f5f5f5;
        height: 200px;
        padding: 8px;
        cursor: pointer;

        &:hover {
          cursor: pointer;
          background-color: #eef5ff;
        }
      }
    }
    .two-table-wrapper {

    }
  }

  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
</style>